<template>
  <div style="width: 100%; height: 100%" class="flex flex-column self-build-house-details">
    <grid-layout :layout="layout" style="overflow: hidden auto">
      <template #left>
        <split-title text="基础信息" />
        <descriptions
          :columns="columns.slice(0, -3)"
          :label-style="{ opacity: 1 }"
          :data-source="selfBuildHouseDetails"
          :col-span="24"
        />
        <split-title text="改建情况" style="margin: 10px 0" />
        <descriptions
          :columns="columns.slice(-3)"
          :label-style="{ opacity: 1 }"
          :data-source="selfBuildHouseDetails"
          :col-span="24"
        />
      </template>
      <template #right>
        <details-tabs :details="selfBuildHouseDetails" />
      </template>
    </grid-layout>
    <div
      class="flex flex-fixed"
      style="padding: 10px 20px; justify-content: flex-end; border-top: 1px solid rgba(47, 171, 255, 0.3)"
    >
      <a-button type="primary" @click="addZl">一键指令</a-button>
    </div>
  </div>
</template>

<script>
import GridLayout from '@gis/lib/layouts/grid-layout.vue';
import { handleCommonRes } from '@gis/lib/utils/resolver.js';
import { zjfDetails } from '@gis/lib/api/index.js';
import { getEnumText } from '@gis/lib/enums/index.js';
import { useDicDataStore } from '@gis/lib/pinia/dicData.js';
import SplitTitle from '@gis/lib/components/splitter/split-title.vue';
import DetailsTabs from './details-tabs.vue';
import { openInstructionTemplateAddEditDialog } from '../instruction/opt.js';

export default {
  name: 'self-build-house-details',
  components: { DetailsTabs, SplitTitle, GridLayout },
  props: {
    details: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      layout: [
        { name: 'left', colSpan: 8, style: { padding: '20px' } },
        { name: 'right', colSpan: 16 },
      ],
      selfBuildHouseDetails: {},
      columns: [
        { label: '普查房屋编号', key: 'census_house_number' },
        { label: '安全排查编号', key: 'security_investigation_number' },
        { label: '房屋用途', key: 'purpose', format: (v) => this.fwytObj[v] || '-' },
        { label: '房屋具体用途', key: 'purposeDetailsVal' },
        { label: '行业主管部门', key: 'industryRegulatoryAuthoritiesVal' },
        { label: '所属街道', key: 'jdName' },
        { label: '所属区域', key: 'area_name' },
        { label: '所在地址', key: 'address' },
        { label: '产权人', key: 'property_owner' },
        { label: '产权人证件号', key: 'property_owner_idcard' },
        { label: '产权人联系方式', key: 'property_owner_phone' },
        { label: '产权性质', key: 'property_nature' },
        { label: '常驻人口数', key: 'permanent_residence_number' },
        { label: '土地性质', key: 'land_nature', format: (v) => this.tdxzObj[v] || '-' },
        // { label: '土地性质细类', key: 'land_nature_details' },
        { label: '楼层数', key: 'floors_number' },
        { label: '建筑面积（平方米）', key: 'floorage' },
        { label: '建筑年代', key: 'build_year' },
        { label: '结构类型', key: 'structure_type', format: (v) => this.jglxObj[v] || '-' },
        { label: '设计方式', key: 'design_methods', format: (v) => ({ 1: '有专业设计', 2: '无专业设计' }[v] || '-') },
        { label: '建造方式', key: 'construction_method', format: (v) => this.jzfsObj[v] || '-' },
        { label: '是否装修', key: 'is_fit_up', format: (v) => getEnumText('whetherOrNot', v) },
        { label: '是否扩建', key: 'is_extension', format: (v) => getEnumText('whetherOrNot', v) },
        { label: '改扩建次数', key: 'extension_number' },
        { label: '改扩建内容', key: 'extension_content' },
      ],
    };
  },
  created() {
    this.getDetails();
  },
  computed: {
    fwytObj() {
      return this.useDicData.getDicData('D0150');
    },
    tdxzObj() {
      return this.useDicData.getDicData('D0151');
    },
    jglxObj() {
      return this.useDicData.getDicData('D0153');
    },
    jzfsObj() {
      return this.useDicData.getDicData('D0154');
    },
  },
  methods: {
    // 指令新增
    addZl() {
      openInstructionTemplateAddEditDialog({
        area_code: this.selfBuildHouseDetails.area_code,
        address: this.selfBuildHouseDetails.address,
        security_investigation_number: this.selfBuildHouseDetails.security_investigation_number,
        details: this.selfBuildHouseDetails,
      });
    },
    async getDetails() {
      const data = await handleCommonRes(zjfDetails({ id: this.details.id }));
      this.selfBuildHouseDetails = data;
    },
  },
  setup() {
    const useDicData = useDicDataStore();
    return { useDicData };
  },
};
</script>

<style scoped></style>
